<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Vote</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>
    body {
        width: 100%;
        background-color: #46b8da;
    }
    .header {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 70px;
        color: white;
        background-color: #46b8da;
        z-index: 100;
    }
    .header button {
        margin: 13px 0;
        border: none;
        border-radius: 0px;
        background-color: transparent;
    }
    .footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 80px;
        padding: 0px 60px;
        background-color: #46b8da;
    }
    .footer button {
        width: 100%;
        height: 5rem;
        font-size: 18px;
        color: white;
        border: none;
        border-radius: 0px;
        background-color: #fdb435;
    }
    .main1 {
        position: fixed;
        top: 70px;
        width: 100%;
        height: 70px;
        background-color: #b9e9f5;
    }
    .main1 audio {
        position: absolute; 
        top:133px; 
        right: -114px; 
        transform: rotate(90deg); 
        opacity: 0;
    }
    .main2 {
        position: fixed;
        top: 140px;
        width: 100%;
        height: 60px;
        margin: -9px 0 0 7%;
        color: white;
        font-size: 20px;
    }
    .main3 {
        position: fixed;
        top: 200px;
        bottom: 100px;
        width: 100%;
        background-color:;
        overflow: auto;
    }
    .line {
        padding: 16px;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .role {
        width: 130px;
        height: 150px;
    }
    .role0 {
        background-color: white;
        padding: 5px;
    }
    .role1 {
        width: 120px;
        height: 80px;
        background-color: #f5c97b;
        font-size: 24px;
        text-align: center;
        line-height: 80px;
    }
    .role2 {
        width: 120px;
        height: 40px;
        background-color: #83b09a;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
    }
    .label0 {
        margin-top: 10px;
        width: 130px;
        height: 30px;
        display: flex;
        justify-content: space-between;    
    }
    .role:hover .label0 div{
        display: block;
    }
    .label0 div {
        width: 30px;
        height: 30px;
        background-image: url(sprites.png);
    }
    .label1 {
        display: none;
        background-position: 0 0;
    }
    .label2 {
        display: none;
        background-position: -30px 0;
    }
    .label3 {
        display: none;
        background-position: 0 -30px;
    }
    .label4 {
        display: none;
        background-position: -30px -30px;
    }
  
</style>
<body>
    <div class="header">
        <button type="button" class="btn dropdown-toggle glyphicon glyphicon-menu-hamburger btn-lg" style="float: left;" data-toggle="dropdown"></button>
        <ul class="dropdown-menu">
            <li><a href="home.html">首页</a></li>
            <li><a href="vote.html">投票</a></li>
            <li><a href="last.html">结果</a></li>
        </ul>
        <button type="button" class="glyphicon glyphicon-remove btn-lg" style="float: right;"></button>
        <h3 class="text-center">投票</h3>
    </div>
    <div class="footer">
        <button type="button">投死</button>
    </div>
    <div class="main1">
        <h4 style="margin-left: 5%; line-height: 50px;">发言讨论结束，大家请投票</h4>
        <img src="audio.png" style="position: absolute; top: 8px; right: 10px;">
        <audio src="audio.mp3" controls="controls">
    </audio>
    <div class="main2">
        <img src="sq1.png">
        <p>点击得票数最多人的头像</p>
    </div>
    </div>

    <div class="main3">
        <div class="line">   
            <div class="role">
                <div class="role0">
                    <div class="role1">水民</div>
                    <div class="role2">1号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
            <div class="role">
                <div class="role0">
                    <div class="role1">水民</div>
                    <div class="role2">2号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
            <div class="role">
                <div class="role0">
                    <div class="role1">警察</div>
                    <div class="role2">3号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
        </div>
        <div class="line">   
            <div class="role">
                <div class="role0">
                    <div class="role1">法官</div>
                    <div class="role2">4号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
            <div class="role">
                <div class="role0">
                    <div class="role1">狙击手</div>
                    <div class="role2">5号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
            <div class="role">
                <div class="role0">
                    <div class="role1">医生</div>
                    <div class="role2">6号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
        </div><div class="line">   
            <div class="role">
                <div class="role0">
                    <div class="role1">杀手</div>
                    <div class="role2">7号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
            <div class="role">
                <div class="role0">
                    <div class="role1">水民</div>
                    <div class="role2">8号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
            <div class="role">
                <div class="role0">
                    <div class="role1">水民</div>
                    <div class="role2">9号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
        </div><div class="line">   
            <div class="role">
                <div class="role0">
                    <div class="role1">杀手</div>
                    <div class="role2">10号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
            <div class="role">
                <div class="role0">
                    <div class="role1">杀手</div>
                    <div class="role2">11号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
            <div class="role">
                <div class="role0">
                    <div class="role1">杀手</div>
                    <div class="role2">12号</div>
                </div>
                <div class="label0">
                    <div class="label1"></div>
                    <div class="label2"></div>
                    <div class="label3"></div>
                    <div class="label4"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.5.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
